<template>
  <div>
    <!-- 顶部滑动条区域 -->
    <div id="slider" class="mui-slider">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">
            {{ item.title }}
          </a>
        </div>
      </div>
    </div>
    <!-- 图片内容展示部分 -->
    <ul class="photoList">
      <router-link :to="'/home/photoinfo/' + v.id" tag="li" v-for="v in content" :key="v.id">
        <img :src="v.img_url" alt=""  v-lazy="v.img_url">
        <div class="text">
          <h2>{{ v.seo_title }}</h2>
          <p>{{ v.seo_description }}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import mui from "./../lib/mui/js/mui.min.js"
export default {
  created() {
    this.getCatesList()
    this.getPhotoListByCateId(0)
  },
  data() {
    return {
      cates: [],
      content: []
    }
  },
  methods: {
    // 获取标题列表
    async getCatesList() {
      const {data: dt} = await this.$http.get('/api/getimgcategory')
      // console.log(dt)
      dt.message.unshift({ title: '全部', id: 0 })
      this.cates = dt.message
    },
    // 获取分项数据
    async getPhotoListByCateId(cateId) {
      const {data: dt} = await this.$http.get(`/api/getimages/${cateId}`)
      // console.log(dt)
      this.content = dt.message
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  touch-action: pan-y;
}
body {
  background-color: #fff;
}
img {
  vertical-align: middle;
  width: 100%;
}
ul {
  padding: 10px;
}
li {
  position: relative;
  margin-bottom: 10px;
  list-style: none;
  color: #fff;
  box-shadow: 0 0 7px grey;
  /* overflow: hidden; */
}
.text {
  position: absolute;
  bottom: 0;
  height: 86px;
  /* white-space: normal; */
  /* text-overflow: ellipsis;
  overflow: hidden; */
  background-color: rgba(0, 0, 0, 0.5);
}
li h2 {
  font-size: 14px;
  text-align: center;
}
li p {
  font-size: 13px;
  color: #fff;
  text-indent: 2em;
}
</style>
